<template>
  <div class="blog window">
    <Bar :nativeClose="nativeClose" :nativeHandle="nativeHandle" :navtiveScale="navtiveScale" :title="blog.title"/>
    <div class="container">
      <div class="blog-content">
        <div class="blog-wapper markdown-body editormd-preview-container">
          <myLoading v-show="loading.blog" />
          <div class="blog-title" v-text="blog.title"></div>
          <div class="blog-info"></div>
          <div class="blog-html" v-html="blog.content"></div>
        </div>
      </div>
      <div class="blog-list">
        <div class="blog-list-con">
          <div class="blog-list-search">
            <input type="text" placeholder="搜索" v-model="listParams.key" @keyup="searchFn">
          </div>
          <div class="blog-item" v-for="item in blogList" :key="item.id" :data-id="item.id">
            <p class="blog-title">{{item.title}}</p>
            <p class="blog-overview">{{item.essay}}</p>
          </div>
          <myLoading theme="white" v-show="loading.list" />
        </div>
      </div>
      <div class="blog-reply"></div>
    </div>
  </div>
</template>

<script>
import { fitWindowSize, hideWindow } from "../../util";
import Bar from "../bar";
import api from '../../util/api'
import myLoading from '../loading'
import Scroll from '../../util/scroll'
import $ from 'jquery'

let me;
let timer;
export default {
  components: {
    Bar,
    myLoading
  },
  data() {
    return {
      listParams: {},
      blogList: [],
      blog: {},
      loading: {
        list: false,
        blog: false
      },
      scrollObj: '',
      windowSizeMax: undefined
    }
  },
  methods: {
    openCallback() {
      me.init()
      console.log('blog opened');
      me.getBlogList((r) => {
        setTimeout(() => {
          $('.blog-item').first().click()
        }, 0);
      })
      me.scrollObj = new Scroll({
        wrapperEl: '.blog-list',
        el: '.blog-list-con',
        callback: me.scrollFn
      })
    },
    nativeClose() {
      this.scrollObj.unbind();
      hideWindow(".blog");
    },
    navtiveScale() {
      this.windowSizeScale = this.windowSizeScale ? undefined : 1;
      fitWindowSize(this.windowSizeScale);
    },
    nativeHandle() {
      if ($('.blog-list').hasClass('show')) {
        $('.blog-list').removeClass('show');
      } else {
        $('.blog-list').addClass('show');
      }
    },
    scrollFn() {
      if (this.loading.list || this.listParams.none) return;
      this.getBlogList();
    },
    bindOneSelect(el) {
      $(el).off('click').on('click', function () {
        if (me.loading.blog) return;
        $(this).addClass('selected').siblings().removeClass('selected');
        if ($('.blog-list').hasClass('show')) {
          $('.blog-list').removeClass('show');
        }
        const id = $(this).data('id');
        me.loading.blog = true;
        api.getBlog(id, (r) => {
          if (r.code === 200) {
            me.blog = r.data[0]
          }
          me.loading.blog = false;
        })
      })
    },
    dealBlogList(data) {
      return data.map((value) => {
        value.time = new Date(value.time).toLocaleString()
        return value;
      })
    },
    getBlogList(cb) {
      if (this.loading.list) return;
      this.loading.list = true;
      api.getBlogList(this.listParams, (r) => {
        if (r.code === 200) {
          if (r.data.length >= this.listParams.pageSize) {
            this.listParams.page++;
          } else {
            this.listParams.none = true;
          }
          r.data = this.dealBlogList(r.data);
          this.blogList = this.blogList.concat(r.data);
          cb && cb(r)
        }
        this.loading.list = false;
      })
    },
    searchFn() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.init()
        this.getBlogList();
      }, 500);
    },
    init() {
      me = this;

      me.listParams.page = 0;
      me.listParams.pageSize = 10;
      me.listParams.time = '';
      me.listParams.none = false;

      me.loading.list = false;
      me.loading.blog = false;
      // me.blog = {}
      me.blogList = []
      fitWindowSize(this.windowSizeScale);
    }
  },
  mounted() {
    this.init()
    
    window.onresize = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fitWindowSize(this.windowSizeScale);
      }, 300);
    }
  },
  updated() {
    this.bindOneSelect('.blog-item');
  }
};
</script>

<style lang="scss" scoped>
.window{
  transition: all 300ms;
}
.blog {
  display: none;
  background-color: #2e3138;
  position: fixed;
  top: 50%;
  left: 50%;
  box-shadow: 10px 10px 30px 10px rgba(0, 0, 0, 0.25);
  .container {
    height: calc(100% - 30px);
  }
}
.blog-list,
.blog-content {
  float: left;
  height: 100%;
  overflow: auto;
}
.blog-list {
  background-color: #282c37;
  position: relative;
  width: 400px;
  left: 0;
  margin-left: -100%;
  .blog-item {
    box-sizing: border-box;
    cursor: pointer;
    padding: 30px 45px 20px 70px;
    transition: all 300ms;
    &:hover {
      background-color: #21242b;
    }
    &.selected {
      background-color: #21242b;
    }
    .blog-title {
      color: #f6f8f7;
      margin: 0 0 10px;
      position: relative;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #f6f8f7;
        top: 50%;
        left: -30px;
        margin: -5px 0 0;
      }
    }
    .blog-overview {
      color: #646871;
      line-height: 1.87;
      word-wrap: break-word;
    }
  }
}
.blog-list-search{
  margin: 0 0 4px;
  height: 32px;
  input{
    height: 100%;
    width: 100%;
    border: none;
    padding-left: 12px;
    background-color: #21242b;
    font-size: 14px;
    outline: none;
    color: #f6f8f7;
  }
}
.blog-content {
  width: 100%;
  padding: 0 0 0 400px;
  background-color: #fff;
  .blog-wapper{
    width: 750px;
    margin: 0 auto;
    padding: 32px 20px;
    overflow: hidden;
  }
  .blog-title{
    font-size: 32px;
    border-left: 5px solid #282c37;
    margin: 0 0 20px;
  }
}
@media screen and (min-width: 1367px) {
  .blog-list{
    &::-webkit-scrollbar-button{
      display: none;
    }
    &::-webkit-scrollbar{
      width: 8px;
    }
    &::-webkit-scrollbar-thumb{
      background: #646871;
    }
  }
  .blog-content{
    &::-webkit-scrollbar-button{
      display: none;
    }
    &::-webkit-scrollbar{
      width: 8px;
    }
    &::-webkit-scrollbar-thumb{
      background: #282c37;
    }
  }
}
@media screen and (max-width: 1366px) {
  .blog{
    .container {
      height: calc(100% - 50px);
    }
  }
  .blog-list{
    transform: translateX(-100%);
    transition: all 300ms;
    &.show{
      transform: translateX(0);
    }
  }
  .blog-content{
    padding: 0;
    .blog-wapper{
      width: 100%;
      padding: 32px;
    }
    .blog-title{
      display: none;
    }
  }
}
@media screen and (max-width: 640px) {
  .blog-content{
    .blog-wapper{
      padding: 32px 20px;
    }
  }
}
@media screen and (max-width: 400px) {
  .blog-list{
    width: 300px;
    .blog-item{
      padding: 10px 20px 10px 50px;
    }
  }
}
</style>
